<template>
  <div class="chart-box">
    <el-row v-loading="chartLoading" class="pie-row">
      <chart
        :id="'chart-common' + random"
        ref="liquidChartData"
        auto-resize
        style="width: 98%; height: 100%"
        :option="{}"
      ></chart>
    </el-row>
  </div>
</template>

<script>
import nt from '../../../../../network'
 import _ from 'lodash'
import mixinOption from '../../../../utils/mixinOption'
import parseApi from '../../../../utils/parseApi'
import echartsLiquidfill from 'echarts-liquidfill'

export default {
  name: 'custom-report-component-chart-liquid',
  props: {
    api: {},
    method: {
      type: String,
      default: 'get',
    },
    dataKey: {},
    mainTitle: {},
    time: {},
    componentData: {},
    changeSize: {},
    changeData: {},
    interval: {},
    mixinParam: {
      type: Object,
      default() {
        return {}
      },
    },
  },
  computed: {
    chartData() {
      return this.liquidChartOption
    },
  },
  data() {
    return {
      comInterval: 0,
      random: Math.random(),
      showChart: false,
      chartLoading: false,
      isDataReady: false,
      blueColors: ['#419EFF', '#66B0FE', '#8BC3FD', '#B1D6FB', '#C6DFF8'],
      liquidChartOption: {},
      liquidChartData: {
        title: {
          text: '水滴图',
          textStyle: {
            color: '#A3ADB6',
            fontFamily: 'PingFangSC-Regular',
            align: 'center',
            verticalAlign: 'middle',
            fontSize: 14,
            fontWeight: 'normal',
          },
          subtext: '--', // ^^^^^^^^^^^^^^^^^^
          subtextStyle: {
            color: '#3aa6ff',
            fontFamily: 'PingFangSC-Regular',
            fontSize: 24,
          },
          left: 'left',
        },
        series: [
          {
            type: 'liquidFill',
            data: [
              {
                value: '',
                itemStyle: {
                  normal: {
                    color: '#DDECFF',
                    opacity: 1,
                  },
                  emphasis: {
                    opacity: 0.5,
                  },
                },
              },
            ],
            color: ['#DDECFF'],
            center: ['50%', '50%'],
            radius: '60%',
            amplitude: 11,
            waveLength: '60%',
            label: {
              show: false,
            },
            shape: 'container',
            waveAnimation: false,
            outline: {
              show: true,
              borderDistance: 0,
              itemStyle: {
                borderColor: 'rgba(255,0,0,0.09)',
                borderWidth: 5, //边框的宽度
                //shadowBlur: 5 , //外部轮廓的阴影范围 一旦设置了内外都有阴影
                //shadowColor: '#000' //外部轮廓的阴影颜色
              },
            },
            backgroundStyle: {
              color: '#fff',
              borderWidth: 3,
              borderColor: '#fff',
            },
            itemStyle: {
              opacity: 1,
              shadowBlur: 0,
            },
            animation: false,
          },
        ],
      },
    }
  },
  watch: {
    componentData() {
      this.changeStyle()
    },
    changeSize() {
      let chart = this.$echarts.init(
        document.getElementById('chart-common' + this.random)
      )
      chart.resize()
    },
    'api.dsName': function () {
      this.changeStyle()
    },
    time() {
      this.changeParam()
    },
    mixinParam: {
      handler: function (val, oldVal) {
        let int = 0
        int = setInterval(() => {
          if (!this.chartLoading) {
            clearInterval(int)
            this.changeParam()
          }
        }, 50)
      },
      deep: true,
    },
    // changeData() {
    //   if (this.interval) {
    //     this.changeStyle()
    //   }
    // }
  },
  methods: {
    changeParam() {
      if (this.api) {
        this.getCommonLiquidData(this.changeStyle)
        clearInterval(this.comInterval)
        if (this.interval) {
          this.comInterval = setInterval(() => {
            this.getCommonLiquidData(this.changeStyle)
          }, this.interval * 1000)
        }
      }
    },
    changeStyle() {
      this.showChart = false
      let liquidChartData = this.liquidChartData
      let componentData = this.componentData
      liquidChartData.title.textStyle.color =
        componentData.title.textStyle.color
      liquidChartData.series[0].outline.itemStyle.borderColor =
        componentData.series[0].itemStyle.normal.color
      liquidChartData.series[0].data[0].itemStyle.normal.color =
        componentData.series[0].itemStyle.normal.color
      liquidChartData.title.subtextStyle.color =
        componentData.series[0].itemStyle.normal.color
      liquidChartData.series[0].outline.show =
        componentData.series[0].outline.show
      liquidChartData.series[0].waveAnimation =
        componentData.series[0].waveAnimation
      liquidChartData.series[0].shape = componentData.series[0].shape
      let chart = this.$echarts.init(
        document.getElementById('chart-common' + this.random)
      )
      this.liquidChartOption = _.cloneDeep(liquidChartData)
      if (componentData.code) {
        //给开发人员测试的，怕忘记删，生产环境就不打印了
        process.env.NODE_ENV === 'development' &&
          console.log(this.mainTitle + ' 混入前option', liquidChartData)
        this.liquidChartOption = mixinOption(
          this.liquidChartOption,
          componentData.code
        )
        process.env.NODE_ENV === 'development' &&
          console.log(this.mainTitle + ' 混入后option', this.liquidChartOption)
      }
      chart.setOption(this.chartData)
      chart.resize()
      this.chartLoading = false
    },
    getCommonLiquidData(callback, newApi) {
      this.chartLoading = true
      let parseLiquidData = (data) => {
        let value = data.value
        let rate = value.data / 100
        let liquidChartData = this.liquidChartData
        liquidChartData.title.text = value.name
        liquidChartData.title.subtext = (rate * 100).toFixed(2) + '%'
        liquidChartData.series[0].data[0].value = rate.toFixed(1)

        if (!this.isDataReady) {
          this.isDataReady = true
          this.$emit( 'dataReady')
        }
      }
      if (!this.api || !this.api.reqUrl) {
        let data = {
          value: {
            //水滴图的数值
            name: '示例数据', //水滴图左上角label显示
            data: 50, //水位高度数值
          },
        }
        parseLiquidData(data)
        if (callback) {
          callback()
        }
      } else {
        nt.doRequest({
          method: 'post',
          uri: '/paas/chart-layout/v1/compdsconfig/testCompDSConfig',
          data: parseApi({
            api: this.api,
            time: this.time,
            mixinParam: this.mixinParam,
          }),
          onSuccess: (resp) => {
            let data = resp.data.content.content
            if (!data || JSON.stringify(data) === '{}') {
              data = {
                value: {
                  name: '--',
                  data: 0,
                },
              }
            }
            parseLiquidData(data)
            if (callback) {
              callback()
            }
          },
          onError: () => {
            this.chartLoading = false
            parseLiquidData({})
            if (callback) {
              callback()
            }
          },
        })
      }
    },
  },
  mounted() {
    this.getCommonLiquidData(this.changeStyle)
    if (this.interval) {
      this.comInterval = setInterval(() => {
        this.getCommonLiquidData(this.changeStyle)
      }, this.interval * 1000)
    }
  },
  beforeDestroy() {
    clearInterval(this.comInterval)
  },
  emits: ['dataReady'],
}
</script>

<style scoped>
.chart-box {
  width: 100%;
  height: 100%;
  position: relative;
}
.pie-row {
  width: 100%;
  height: 100%;
}
</style>
